<template>
	<view>
		<view class="navList">
			<view @click="close"><i class="iconfont iconfanhui-copy"></i></view>
			<view class="navTitle">
				<text v-for="(item,index) in navList" :key="index" :class="[navIndex == index ? 'name_active':'']" @tap="navClick(index)">{{item}}</text>
			</view>
		</view>
		<view class="top">
			<view class="topCont">
				<view class="topItem" :class="index == topIndex ? 'topActive':''" v-for="(item,index) in topList" :key="index" @tap="switchTop(index)">{{item}}</view>
			</view>
		</view>
		<!-- <my-recommend v-if="topIndex == 2" :list="artList" :status="status" :contentText="contentText" stateType="0" :users_type="users_type"></my-recommend> -->
		<!-- 文章 -->
		<my-article v-if="topIndex == 1 || topIndex == 2 || topIndex == 5" :list="artList" :status="status" :contentText="contentText"
		 stateType="0" :users_type="users_type" addType="9"></my-article>
		<!-- 视频 -->
		<my-video v-if="topIndex == 3 || topIndex == 4" :list="videoList" :pagesize="pagesize" :status="status" :contentText="contentText"
		 type="0" :users_type="users_type"></my-video>
		<!-- 底部 -->
		<my-bottom :buttomIndex="1"></my-bottom>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import myBottom from './components/bottom.vue';
	// import myRecommend from './components/recommend.vue';
	import myArticle from '@/components/school/artlist';
	import myVideo from '@/components/school/video';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			myArticle,
			myVideo,
			myBottom,
			// myRecommend,
			uniLoadMore
		},
		data() {
			return {
				topList: ['主页', '关注', '推荐', '视频', '直播', '文章','学校'], //选项卡列表
				topIndex: 2, //选项卡索引值
				navList: ['晒娃', '抖教', '抖学'],
				navIndex: 0,
				artList: [], //文章列表
				videoList: [], //视频列表
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				isLoading: true, // 是否加载loading
				pagesize: 9,
				users_type: 3, // 默认是晒娃 1 抖学 2 抖教,
				userBlackList: [], // 黑名单列表
			}
		},
		// 监听用户系统返回键,ios系统暂不兼容
		onBackPress(e) {
			// 关闭默认提示
			let main = plus.android.runtimeMainActivity();
			//为了防止快速点按返回键导致程序退出重写quit方法改为隐藏至后台  
			plus.runtime.quit = function() {
				main.moveTaskToBack(false);
			};
			//重写toast方法如果内容为 ‘再按一次退出应用’ 就隐藏应用，其他正常toast  
			plus.nativeUI.toast = (function(str) {
				if (str == '再按一次退出应用') {
					uni.switchTab({
						url: '../index/index'
					})
					return false;
				} else {
					uni.showToast({
						title: str,
						icon: 'none',
					})
				}
			})
		},
		onPullDownRefresh() {
			this.isLoading = false
			this.page = 1;
			this.reload = true;
			this.artList = []
			this.videoList = []
			this.userBlackList = []
			this.getUserBlackList()
			switch (this.topIndex) {
				case 1:
					this.getList(1)
					break
				case 2:
					this.getList(2)
					break
				case 3:
					this.getVideoList()
					break
				case 5:
					this.getList(5)
					break
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.isLoading = false
			this.status = 'loading';
			this.page = (this.videoList.length > 0 || this.artList.length > 0) ? this.page += 1 : this.page
			var _this = this;
			setTimeout(function() {
				switch (_this.topIndex) {
					case 1:
						_this.getList(1)
						break
					case 2:
						_this.getList(2)
						break
					case 3:
						_this.getVideoList()
						break
					case 5:
						_this.getList(5)
						break
				}
			}, 500);
		},
		onLoad() {},
		onShow() {
			this.getUserBlackList()
			uni.hideTabBar({
				success: function(e) {}
			})
			if (this.topIndex == 0 || this.topIndex == 6) {
				this.artList = []
				this.videoList = []
				this.topIndex = 1
				this.page = 1
				this.getList(this.topIndex)
			} else {
				this.page = (this.videoList.length > 0 || this.artList.length > 0) ? this.page += 1 : this.page
				if (this.topIndex == 3) {
					this.getVideoList()
				} else {
					this.getList(this.topIndex)
				}
			}
		},
		methods: {
			navClick(index) {
				this.navIndex = index
				this.topIndex = 1
				this.users_type = 3 - index
				this.artList = []
				this.videoList = []
				this.getList(1)
			},
			close() {
				this.navIndex = 0
				this.topIndex = 1
				this.page = 1;
				this.reload = true;
				this.isLoading = true
				this.artList = []
				this.videoList = []
				uni.switchTab({
					url: '../index/index'
				})
			},
			/* 切换顶部选项卡 */
			switchTop(index) {
				this.artList = []
				this.videoList = []
				this.topIndex = index;
				this.page = 1;
				this.reload = true;
				this.isLoading = true
				switch (this.topIndex) {
					case 0:
						uni.navigateTo({
							url: './personal?users_type=' + this.users_type
						})
						break
					case 1:
						this.getList(1)
						break
					case 2:
						this.getList(2)
						break
					case 3:
						this.getVideoList()
						break
					case 5:
						this.getList(5)
						break
					case 6:
						uni.navigateTo({
							url: 'sort?users_type=' + this.users_type
						})
						break
				}
			},
			// 获取黑名单列表
			getUserBlackList() {
				this.userBlackList = []
				this.$zapi.apiPost('user/video.User/UserBlackList').then(res => {
					if (res.data.code == 200) {
						this.userBlackList = res.data.data.data
					}
				})
			},
			/* 获取文章列表 */
			getList(type) {
				if (this.isLoading) {
					uni.showLoading({
						title: '加载中...'
					})
				}
				let data = {
					users_type: this.users_type,
					is_check: 2,
					page: this.page,
					pagesize: this.pagesize
				}
				let url = 'user/article.Lists/articleList'
				/**
				 * @type
				 * 0:首页，1:关注，2:推荐，5:文章
				 * */
				switch (type) {
					case 1:
						data.is_user = 2
						break
					case 2:
						url = 'user/shakeschool.Users/recommendList'
						break
					case 5:
						break
				}
				this.$zapi.apiPost(url, data).then(res => {
					if (res.data.code == 200 && res.data.data.data.length > 0) {
						var list = res.data.data.data;
						list.forEach((v, i) => {
							v.black_state = false
							if (this.userBlackList.length > 0) {
								this.userBlackList.forEach(v1 => {
									if (v.user_id == v1.user_id) {
										v.black_state = true
									}
								})
							}
						})
						this.artList = this.artList.concat(list)
						if (this.isLoading) {
							setTimeout(() => {
								uni.hideLoading()
							}, 300)
						}
					} else {
						this.page = this.page == 1 ? this.page : this.page -= 1
						if (this.isLoading) {
							setTimeout(() => {
								uni.hideLoading()
							}, 300)
						}
						this.status = 'noMore'
					}
				})
			},
			/* 视频列表 */
			getVideoList() {
				let data = {
					users_type: this.users_type,
					page: this.page,
					pagesize: this.pagesize
				}
				this.$zapi.apiPost('user/video.Lists/VideoList', data).then(res => {
					if (res.data.code == 200 && res.data.data.data.length > 0) {
						let list = res.data.data.data
						list.forEach((v, i) => {
							v.black_state = false
							if (this.userBlackList.length > 0) {
								this.userBlackList.forEach(v1 => {
									if (v.user_id == v1.user_id) {
										v.black_state = true
									}
								})
							}
						})
						this.videoList = this.videoList.concat(list)
					} else {
						this.page = this.page == 1 ? this.page : this.page -= 1
						this.status = 'noMore'
					}
				})
			}
		},
	}
</script>

<style>
	/* 顶部 */
	.top {
		position: fixed;
		top: 146upx;
		left: 0;
		width: 100%;
		height: 100upx;
		background-color: #FF9900;
		z-index: 998;
	}

	.topCont {
		height: 100%;
		background-color: #FFFFFF;
		border-radius: 40upx 40upx 0 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		white-space: nowrap;
		overflow: auto;
	}

	.topItem {
		color: #999999;
		font-size: 30upx;
		padding: 0 18upx 0 30upx;
		font-weight: 400;
		opacity: 0.8;
		line-height: 1;
	}

	.topActive {
		color: #333333;
		font-size: 34upx;
		font-weight: 500;
	}

	.navList {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 128upx;
		padding: 94upx 6upx 54upx;
		display: flex;
		overflow: hidden;
		box-sizing: border-box;
		color: #fff;
		background-color: #FF9900;
		transition-property: all;
		z-index: 99999;
		padding-left: 30upx;
		align-items: center;
		font-size: 32upx;
	}

	.nav .iconfanhui-copy {
		margin-left: 20upx;
		font-size: 32upx;
		color: #FFFFFF;
	}

	.navTitle {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.name_active {
		font-weight: bold;
	}

	.news_other {
		margin-top: 100upx;
	}

	.videoAll {
		margin-top: 100upx;
	}
</style>
